#tag layout_block("css_page_level")
<link rel="stylesheet" type="text/css" href="${CONTEXT_PATH}/assets/global/plugins/select2/select2.css"/>
<link rel="stylesheet" type="text/css" href="${CONTEXT_PATH}/assets/global/plugins/jquery-nestable/jquery.nestable.css"/>
#end
#tag layout_block("css")
<style>
    .ck_label {
        font-weight: 400;
        margin-bottom: 0px;
        font-size: 13px;
    }
</style>
#end
#tag layout_block("js_page_level")
<script type="text/javascript" src="${CONTEXT_PATH}/assets/global/plugins/select2/select2.min.js"></script>
<script src="${CONTEXT_PATH}/assets/global/plugins/bootstrap-growl/jquery.bootstrap-growl.min.js"></script>
<script src="${CONTEXT_PATH}/assets/global/plugins/bootstrap-confirmation/bootstrap-confirmation.min.js"
        type="text/javascript"></script>
#end

#tag layout_block("content")
<div class="lockDiv row">
    <div class="col-md-4">
        <div class="portlet light bg-inverse">
            <div class="portlet-title">
                <div class="caption">
                    <span class="caption-subject font-red bold uppercase">${getMessage('net.mayee.alice.web.sys.role.title.permission_role')}</span>
                </div>
            </div>
            <div class="portlet-body form">
                <!-- BEGIN FORM-->
                <form class="form-horizontal" role="form">
                    <div class="form-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-3">${getMessage('net.mayee.alice.web.sys.role.role_key')}:</label>

                                    <div class="col-md-9">
                                        <p class="form-control-static">
                                            ${role.roleKey}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-3">${getMessage('net.mayee.alice.web.sys.role.name')}:</label>

                                    <div class="col-md-9">
                                        <p class="form-control-static">
                                            ${role.name}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-12">
                                <button type="button" id="saveBtn" class="btn red" data-toggle="confirmation"
                                        title="${getMessage('net.mayee.alice.alert.save')}"
                                        data-btn-ok-label="${getMessage('net.mayee.alice.global.yes')}"
                                        data-btn-cancel-label="${getMessage('net.mayee.alice.global.no')}"
                                        data-singleton="true"><i class="fa fa-save"></i> ${getMessage('net.mayee.alice.btn.save')}
                                </button>
                                <button type="button" class="btn default"
                                        onclick="javascript:window.location.href='${CONTEXT_PATH}/sdm/sys/role/R'">
                                    ${getMessage('net.mayee.alice.btn.cancel')}
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <!-- END FORM-->
                <div class="alert alert-success no-margin margin-top-10">
                    ${getMessage('net.mayee.alice.note.role_permission')}
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="alert alert-success no-margin margin-bottom-10">
            ${getMessage('net.mayee.alice.note.role_permission2')}
        </div>
        <form class="form-horizontal" role="form" id="form_1">
            <div class="portlet box red">
                <div class="portlet-body flip-scroll">
                    ${permissionsTableString}
                </div>
            </div>
        </form>

    </div>
</div>
#end

#tag layout_block("script")
<script>
    jQuery(document).ready(function () {
        var table = $("#permissionsTable");
        var el = $(".lockDiv");

        Alice.groupCheckable(table, ".ckgTd input:checkbox");
        Alice.permissionCheckable(table, ".ckTd input:checkbox", ".ckTd");

        $("#saveBtn").click(function () {
            Metronic.blockUI({
                target: el,
                animate: true,
                overlayColor: 'green'
            });
            $.ajax({
                type: "POST",
                url: "${CONTEXT_PATH}/sys/role/RP/ajax/${role.uuid}",
                data: $('#form_1').serialize(),
                dataType: "JSON",
                success: function (res) {
                    Metronic.unblockUI(el);
                    if (res.msgid == 'SSSS') {
                        Alice.showDefaultSuccessGrowl(res.msgdesc);
                    } else {
                        Alice.showDefaultWarningGrowl(res.msgdesc);
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    Metronic.unblockUI(el);
                    Alice.showDefaultWarningGrowl("${getMessage('net.mayee.alice.error.data_error')}");
                }
            });
        });


    });
</script>
#end
#include ("/layout/layout_main.html")
